<template>
  <div class="article-page">
    <!-- 上半部分 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 工单统计 -->
        <el-col :span="13">
          <el-card
            style="height: 200px; width: 550px"
            shadow="never"
            class="gongdan"
          >
            <div class="a">
              <p class="b">工单统计</p>
              <span class="c">2022.11.01~2022.11.21</span>
            </div>
            <div class="body">
              <div class="stats">
                <div class="lef">{{ sum }}</div>
                <div class="rig">工单总数 (个)</div>
              </div>
              <div class="stats">
                <div class="lef">0</div>
                <div class="rig">完成总数 (个)</div>
              </div>
              <div class="stats">
                <div class="lef">0</div>
                <div class="rig">进行总数 (个)</div>
              </div>
              <div class="stats">
                <div class="lef">{{ sum1 }}</div>
                <div class="rig">取消总数 (个)</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 销售统计 -->
        <el-col :span="11">
          <el-card
            style="height: 200px; width: 500px"
            shadow="never"
            class="xiaoshou"
          >
            <div class="a1">
              <p class="b1">销售统计</p>
              <span class="c1">2022.11.01~2022.11.21</span>
            </div>
            <div class="body1">
              <div class="stats1">
                <div class="lef1">{{ list1 }}</div>
                <div class="rig1">订单量 (个)</div>
              </div>
              <div class="stats1">
                <div class="lef1">{{ ab.toFixed(2) }}</div>
                <div class="rig1">销售额 (万元)</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 销售数据 -->
        <el-col>
          <el-card style="width: 1170px; height: 400px" class="xssj">
            <div class="a1">
              <p class="b1">销售数据</p>
              <span class="c1">2022.11.01~2022.11.20</span>
            </div>
             <div class="btn">
               <Xiaoshou />
              </div>
          </el-card>
        </el-col>
      </el-col>
      <!-- 商品热榜 -->
      <el-col :span="6">
        <el-card style="width: 350px; height: 640px" class="shangpin">
          <div class="a1">
            <p class="b1">商品热榜</p>
            <span class="c1">2022.11.01~2022.11.21</span>
          </div>
          <div class="body">
            <ul v-for="(item, index) in List" :key="index">
              <li>
                <div class="a">
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="b">
                  <span>{{ item.skuName }}</span>
                </div>
                <div class="c">
                  <span>{{ item.count }}单</span>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 下半部分 -->
    <el-row :gutter="20">
      <!-- 合作商店位数 -->
      <el-col :span="14">
        <el-card style="width: 900px; height: 400px" class="hezuo">
          <div class="a1">
            <div class="top"><p class="b1">合作商店位数Top5</p></div>
            <div class="btn">
              <div class="left">
                <Hezuo :Point="Point"/>
              </div>
              <div class="right">
                <div class="count">{{ count11 }}</div>
                <div class="name">点位数</div>
                <div class="count">{{ count22 }}</div>
                <div class="name">合作商数</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 异常设备监控 -->
      <el-col :span="10">
        <el-card style="width: 619px; height: 400px" class="yichang">
          <div class="a1">
            <p class="b1">异常设备监控</p>
            <i class="el-icon-chat-dot-round"></i>
          </div>
          <div class="empty">
            <img
              src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
              alt=""
            />
            <div class="tips">暂无数据</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  taskReportInfo,
  orderCount,
  orderAmount,
  skuTop,
  getPoint,
  count1,
  count2,
} from "@/api/article";
import Hezuo from "@/components/Hezuo.vue";
import Xiaoshou from '@/components/Xiaoshou.vue'
export default {
  components: {
    Hezuo,
    Xiaoshou
  },
  data() {
    return {
      list: [],
      list1: [],
      list2: 0,
      List: [],
      count11: "",
      count22: "",
      Point:[]
    };
  },
  computed: {
    sum() {
      return this.list.reduce((sum, item) => (sum += item.total), 0);
    },
    sum1() {
      return this.list.reduce((sum, item) => (sum += item.cancelTotal), 0);
    },
    ab() {
      return this.list2 / 1000000;
    },
  },
  async created() {
    const res = await taskReportInfo();
    console.log(res);
    this.list = res;
    const a = await orderCount();
    console.log(a);
    this.list1 = a; //9498
    const b = await orderAmount();
    console.log(b);
    this.list2 = b; //6.92
    console.log(this.list2);
    const c = await skuTop();
    console.log(c); //热榜
    this.List = c;
    const Point = await getPoint();
    console.log(Point);
    this.Point =Point
    const h = await count1();
    console.log(h); //16
    this.count11 = h;
    const g = await count2();
    console.log(g); //5
    this.count22 = g;
  },
};
</script>

<style lang="scss" scoped>
.article-page {
  height: 100vh;
  .gongdan {
    border-radius: 30px;
    margin: 20px;
    background: url("http://likede2-admin.itheima.net/img/task.66b715b7.png")
      no-repeat center/cover;
    .a {
      display: flex;
      .b {
        font-size: 22px;
        font-weight: 800;
      }
      .c {
        font-size: 12px;
        margin-top: 28px;
        margin-left: 20px;
        color: #999;
      }
    }
    .body {
      display: flex;
      flex: 1;
      .stats {
        margin-left: 45px;
        justify-content: center;
        align-items: center;
        .lef {
          height: 50px;
          font-size: 36px;
          height: 50px;
          font-weight: 800;
          line-height: 50px;
          color: #072074;
        }
        .rig {
          height: 17px;
          margin-top: 10px;
          font-size: 12px;
          line-height: 17px;
          font-weight: 400;
          color: #91a7dc;
        }
      }
    }
  }
  .xiaoshou {
    margin: 20px;
    border-radius: 30px;
    background: url("http://likede2-admin.itheima.net/img/sale.606b0d8c.png")
      no-repeat center/cover;
    .a1 {
      display: flex;
      .b1 {
        font-size: 22px;
        font-weight: 800;
      }
      .c1 {
        font-size: 12px;
        margin-top: 28px;
        margin-left: 20px;
        color: #999;
      }
    }
    .body1 {
      display: flex;
      flex: 1;
      .stats1 {
        margin-left: 100px;
        justify-content: center;
        align-items: center;
        .lef1 {
          height: 50px;
          font-size: 36px;
          height: 50px;
          font-weight: 800;
          line-height: 50px;
          color: #ff5757;
        }
        .rig1 {
          height: 17px;
          margin-top: 10px;
          font-size: 12px;
          line-height: 17px;
          font-weight: 400;
          color: #de9690;
        }
      }
    }
  }
  .xssj {
    margin: 20px;
    border-radius: 30px;
    .a1 {
      .b1 {
        float: left;
        font-size: 22px;
        font-weight: 800;
      }
      .c1 {
        float: left;
        font-size: 12px;
        margin-top: 28px;
        margin-left: 20px;
        color: #999;
      }
      
    }
  }
  .shangpin {
    margin: 20px;
    border-radius: 30px;
    .a1 {
      display: flex;
      .b1 {
        font-size: 22px;
        font-weight: 800;
      }
      .c1 {
        font-size: 12px;
        margin-top: 28px;
        margin-left: 20px;
        color: #999;
      }
    }
    .body {
      li {
        height: 37px;
        margin-bottom: 5px;
        list-style: none;
      }
      .a {
        background: url("");
        float: left;
        line-height: 20px;
        width: 20px;
        height: 20px;
        color: #8e5900;
        span {
          margin-left: 5px;
        }
      }
      .b {
        float: left;
        margin-left: 20px;
        span {
          font-size: 18px;
        }
      }
      .c {
        float: right;
        span {
          font-size: 18px;
        }
      }
    }
  }
  .hezuo {
    margin: 30px;
    border-radius: 30px;
    .a1 {
      margin-left: 10px;
      justify-content: center;
      align-items: center;
      .top {
        width: 900px;
        height: 50px;
        .b1 {
          font-size: 22px;
          font-weight: 800;
        }
      }
      .btn {
        flex: 1;
        .left {
          float: left;
        }
        .right {
          border-radius: 30px;
          width: 154px;
          height: 230px;
          background-color: #dddddd;
          margin-right: 40px;
          float: right;
          padding-top: 47px;
          padding-left: 38px;
          .count {
            margin-left: 20px;
            margin-bottom: 10px;
            height: 33px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #072074;
            line-height: 33px;
          }
          .name {
            margin-left: 20px;

            margin-bottom: 10px;
            height: 17px;
            margin-top: 6px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
      }
    }
  }
  .yichang {
    margin: 30px;
    border-radius: 30px;
    .a1 {
      display: flex;
      .b1 {
        font-size: 22px;
        font-weight: 800;
      }
      i {
        margin-top: 30px;
        font-size: 25px;
        margin-left: 400px;
        color: #5f84ff;
      }
    }
    .empty {
      margin-top: 50px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img {
        font-size: 50px;
      }
      .tips {
        margin-top: 25px;
        color: #20232a;
        font-size: 16px;
      }
    }
  }
}
</style>
